<template>
<div class="h100">
  <el-container class="flex flex-column  h100">
    <el-header>
      <el-row>
        <el-col class="title-container" :span="6">
          <span class="title-text" @click="toggleMenu">Mnutec 智能任务系统</span>
        </el-col>
        <el-col :span="12">
          <el-menu :default-active="activeIndex" class="header-menu" mode="horizontal"  >
            <el-menu-item index="1" @click="show('dashboard')" >DashBoard</el-menu-item>
            <el-submenu index="2">
              <template slot="title">我的工作台</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
              <el-menu-item index="2-3">选项3</el-menu-item>
              <el-submenu index="2-4">
                <template slot="title">选项4</template>
                <el-menu-item index="2-4-1">选项1</el-menu-item>
                <el-menu-item index="2-4-2">选项2</el-menu-item>
                <el-menu-item index="2-4-3">选项3</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-menu-item index="3" disabled>消息中心</el-menu-item>
            <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="6">
          <div  class="flex item-center" style="height: 60px;justify-content: flex-end;color: white">
            <el-avatar :src="user.headImgUrl" size="small" class="mr1"></el-avatar>
            <span class="mr1" >{{user.nickname}}</span>
            <i class="el-icon-setting" @click="gotoUserProfile"></i>
          </div>

        </el-col>
      </el-row>
    </el-header>
    <el-container style="height:0;flex: 1">
    <el-aside style="width: unset">
      <el-menu style="text-align: left;border-right: 0" :collapse="isCollapse" class="side-menu">
        <el-submenu v-for="(item,index) in routers" :key="index" :index="index.toString()" v-show="item.display" >
          <template slot="title">
            <i :class="item.icon"></i>
            <span @click="$router.push(item.path)">{{ item.name }}</span>
          </template>
          <el-menu-item v-for="(child,index2) in item.children" :key="index2" :index="index+'-'+index2" v-show="child.display" @click="$router.push(child.path)" >
            <i :class="child.icon"></i>
            <span>{{child.name}}</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
      <el-container>
      <el-main style="height: 100%;" ref="main" >
        <div style="height: 100%;overflow-y: auto" @scroll="onscroll">
        <div class="bread" :style="scrollTop>0?'box-shadow: rgb(204, 204, 204) 0px 2px 4px 0px;':''">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>活动列表</el-breadcrumb-item>
            <el-breadcrumb-item>活动详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <router-view style="height: calc(100% - 24px)">

        </router-view>
        </div>

      </el-main>
      <el-footer>
        <a href="https://beian.miit.gov.cn/">蜀ICP备19005116号-1</a>
      </el-footer>
      </el-container>
    </el-container>

  </el-container>
</div>
</template>

<script>
import routers from "@/views/home/router";
export default {
  name: "home",
  data(){
    return {
      routers,
      img:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      isCollapse:true,
      scrollTop:0,
      activeIndex:'1',
      user:this.$store.state.userInfo
    }
  },mounted() {

  },

  methods:{
    toggleMenu(){
      this.isCollapse = !this.isCollapse;
    },
    onscroll(e){
      this.scrollTop = e.target.scrollTop
    },
    show(name){
      if(this.$route.name!==name) {
        this.$router.push({name: name})
      }
    },
    gotoUserProfile(){
        this.$router.push({
          name:'用户信息'
        })
    }
  }
}
</script>

<style scoped>
@import "../../../assets/css/common.css";

.el-header {
  background-color: var(--headerBackground);
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-footer{
  background-color: #e1e4e8;
  line-height: 60px;

}
.el-footer a{
  text-decoration: none;
  color: black;
}
.el-aside {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 200px;
  border-right: solid 1px #e6e6e6;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;

}
.title-container{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  color: white;
  font-size: 1rem;
}
.title-text{
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 5px;
}

.title-text:hover{
  background-color: #4592f8;
}

.side-menu:not(.el-menu--collapse){
  width: 200px;
}

.el-menu-demo{
  background-color: var(--headerBackground);
  overflow: hidden;
  height: var(--headerHeight);
}


.el-menu.el-menu--horizontal{
  border: 0;
}
.bread{
  z-index: 1;
  position: sticky;
  top: 0;
  transition: box-shadow .5s;
  padding-bottom: 10px;
  background-color: #E9EEF3;
}

.header-menu{
  background: transparent;

}

.header-menu .el-menu-item{
  color: white;
}

.header-menu .el-submenu >>> .el-submenu__title{
  color: white;
}

.header-menu .el-submenu >>> .el-submenu__title:hover{
  background: #4592f8;
}
.header-menu .is-active{
  background: #4592f8;
  color: white;
}

.header-menu .el-menu-item:hover,.header-menu .el-menu-item:focus{
  background: #4592f8;
  color: white;
}

.el-icon-setting{
    cursor: pointer;
}
</style>
